<template>
  <div class="my-coupon-page">
    <van-nav-bar title="我的优惠券" left-arrow @click-left="goBack" />
    
    <!-- 标签页 -->
    <van-tabs v-model:active="activeTab" sticky>
      <van-tab title="可使用">
        <coupon-list :coupons="availableCoupons" />
      </van-tab>
      <van-tab title="已使用">
        <coupon-list :coupons="usedCoupons" />
      </van-tab>
      <van-tab title="已过期">
        <coupon-list :coupons="expiredCoupons" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import CouponList from '@/components/coupon-list/index.vue'

const router = useRouter()

// 响应式数据
const activeTab = ref(0)
const coupons = ref([])

// 根据状态筛选优惠券
const availableCoupons = computed(() => coupons.value.filter(coupon => coupon.status === 'available'))
const usedCoupons = computed(() => coupons.value.filter(coupon => coupon.status === 'used'))
const expiredCoupons = computed(() => coupons.value.filter(coupon => coupon.status === 'expired'))

// 获取我的优惠券
const getMyCoupons = async () => {
  try {
    // 模拟数据
    coupons.value = [
      {
        id: 1,
        title: '新人专享券',
        description: '全场通用，无门槛使用',
        amount: 10,
        condition: 0,
        validTime: '2024-12-31到期',
        status: 'available'
      },
      {
        id: 2,
        title: '满减优惠券',
        description: '满100减20，限时优惠',
        amount: 20,
        condition: 100,
        validTime: '2024-12-31到期',
        status: 'available'
      },
      {
        id: 3,
        title: '品类专享券',
        description: '服装类商品专用',
        amount: 15,
        condition: 50,
        validTime: '2024-12-31到期',
        status: 'used'
      },
      {
        id: 4,
        title: '已过期优惠券',
        description: '满50减10',
        amount: 10,
        condition: 50,
        validTime: '2024-01-01到期',
        status: 'expired'
      }
    ]
  } catch (error) {
    console.error('获取我的优惠券失败:', error)
    showToast('获取我的优惠券失败')
  }
}

// 返回上一页
const goBack = () => {
  router.back()
}

// 组件挂载时获取数据
onMounted(() => {
  getMyCoupons()
})
</script>

<style lang="scss" scoped>
.my-coupon-page {
  background-color: #f5f5f5;
  min-height: 100vh;
}
</style> 